<template>
  <div class="pageStyle">
    <div class="block">
      <el-pagination
        :current-page="pageData.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChangeFn"
        @current-change="handleCurrentChangeFn"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageFlex',
  props: {
    pageData: {
      type: Object,
      default: () => {}
    },
    total: {
      type: Number,
      default: 0

    }
  },
  created() {
    console.log(this.pageData)
  },
  methods: {
    handleSizeChangeFn(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChangeFn(val) {
      this.$emit('handleCurrentChange', val)
    }
  }

}
</script>

<style>
.el-pager li{
  font-size: 15px;

}
.el-pagination__editor.el-input .el-input__inner,
.el-pagination .el-select .el-input .el-input__inner{
  font-size: 15px;
}
.el-pagination span:not([class*=suffix]), .el-pagination button{
font-size: 20px;

}
.pageStyle{
  margin-top: 50px;
  margin-bottom: 20px;
text-align: center;
}
.el-pagination__total{
  margin-top: 10px;
}
.el-pager{
  margin-top: 10px;
}
.btn-prev i{
  margin-top: 20px;
}
.btn-next i{
  margin-top: 20px;
}
.el-pagination__jump{
  margin-top: 10px;
}
.el-pagination__sizes{
  margin-top: 10px;
}
</style>
